<template>
  <div>
    <div>
      <!-- 作业类型的下拉选择框-->
      <el-select v-model="workvalue"
                 placeholder="请选择"
                 style="width:120px;margin-left:3%"
                 size="mini"
                 clearable
                 @change="changework">
        <el-option v-for="item in workoptions"
                   :key="item.workvalue"
                   :label="item.label"
                   :value="item.workvalue">
        </el-option>
      </el-select>
      <!-- 科目类型的下拉选择框-->
      <el-select v-model="subjectvalue"
                 placeholder="请选择"
                 style="width:120px;margin-left:4.5%"
                 size="mini"
                 clearable
                 @change="changework">
        <el-option v-for="item in subjectoptions"
                   :key="item.workvalue"
                   :label="item.label"
                   :value="item.subjectvalue">
        </el-option>
      </el-select>

      <!-- 状态的下拉选择框-->
      <el-select v-model="statusvalue"
                 placeholder="请选择"
                 style="width:120px;margin-left:40.8%"
                 size="mini"
                 clearable
                 @change="changework">
        <el-option v-for="item in statusoptions"
                   :key="item.workvalue"
                   :label="item.label"
                   :value="item.statusvalue">
        </el-option>
      </el-select>
    </div>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column label="作业类型"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.job_type }}</span>
        </template>
      </el-table-column>

      <el-table-column label="科目"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{ scope.row.subject }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="发布时间"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{
              new Date(scope.row.release_time).toLocaleString()
            }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="过期时间"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{
              new Date(scope.row.expiration_time).toLocaleString()
            }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{ scope.row.status }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">痛みを感じよう
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination @next-click="next"
                   @prev-click="prev"
                   :current-page="currentPage"
                   :page-sizes="[8]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next"
                   :total="total"
                   style="margin-left:33%;margin-top:1.5%">
    </el-pagination>

    <div style="margin-top:-46.2%;margin-left:11.5%"></div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data () {
    return {
      uid: 0,
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],
      selectWork: {},

      workvalue: "",
      workoptions: [
        {
          workvalue: "家庭作业",
          label: "家庭作业"
        },
        {
          workvalue: "暑假作业",
          label: "暑假作业"
        },
        {
          workvalue: "周末作业",
          label: "周末作业"
        }
      ],

      subjectvalue: "",
      subjectoptions: [
        {
          subjectvalue: "语文",
          label: "语文"
        },
        {
          subjectvalue: "数学",
          label: "数学"
        },
        {
          subjectvalue: "英语",
          label: "英语"
        },
        {
          subjectvalue: "政治",
          label: "政治"
        },
        {
          subjectvalue: "历史",
          label: "历史"
        },
        {
          subjectvalue: "地理",
          label: "地理"
        },
        {
          subjectvalue: "物理",
          label: "物理"
        },
        {
          subjectvalue: "化学",
          label: "化学"
        },
        {
          subjectvalue: "生物",
          label: "生物"
        }
      ],

      statusvalue: "",
      statusoptions: [
        {
          statusvalue: "已完成",
          label: "已完成"
        },
        {
          statusvalue: "未完成",
          label: "未完成"
        }
      ]
    };
  },
  methods: {
    //开始痛苦(做作业的那个按钮)
    handleEdit (index, row) {

      console.log(row);
      console.log(index, new Date(row.expiration_time).toLocaleString());
      if (row.status == "已完成") {
        alert("已经完成该作业");
        return;
      }

      if (
        new Date().toLocaleString() <
        new Date(row.expiration_time).toLocaleString()
      ) {
        this.$store.commit("setHomeortestid", row.id);
        this.$router.push("/student/job");
      } else {
        alert("已过期");
      }
    },

    //分页
    findByPage () {
      this.selectWork.c_id = this.$store.state.c_id;
      this.selectWork.page = this.currentPage;
      this.selectWork.size = this.size;
      this.selectWork.job_type = this.workvalue;
      this.selectWork.subject = this.subjectvalue;
      this.selectWork.status = this.statusvalue;
      console.log(this.selectWork);
      axios
        .post(commons.baseUrl + "student/homework", this.selectWork, {
          headers: { "Content-Type": "application/JSON" }
        })
        .then(res => {
          console.log(res.data);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
    //下一页
    next () {
      this.currentPage = this.currentPage + 1;
      this.findByPage();
    },
    //上一页
    prev () {
      this.currentPage = this.currentPage - 1;
      this.findByPage();
    },
    //选中作业/科目/状态/下一页时候下拉框里面的值
    changework () {
      console.log(this.statusvalue);
      this.findByPage();

    }
  },
  mounted () {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {}
};
</script>
<style scoped></style>
